<template>
  <q-input
    :label="label"
    :style="{ width: width + 'px', height: '40px' }"
    @clear="onClear"
    autocomplete="off"
    clearable
    dense
    filled
    ref="input"
    v-model="triggerModel"
  >
    <q-popup-proxy @keyup.enter="onConfirm" v-model="open">
      <div class="q-pt-md q-pl-md">
        <q-btn-toggle
          :options="[
            { label: '小于', value: 'smaller' },
            { label: '大于', value: 'larger' },
            { label: '区间', value: 'between' },
          ]"
          color="white"
          text-color="primary"
          toggle-color="primary"
          unelevated
          v-model="direction"
        />
      </div>
      <div class="q-pa-md q-gutter-md">
        <q-input autocomplete="off" autofocus filled v-model="popupModel" />

        <q-input v-if="direction === 'between'" autocomplete="off" filled v-model="popupModel2" />

        <div>
          <q-btn class="full-width" color="primary" label="确认" @click="onConfirm" />
        </div>
      </div>
    </q-popup-proxy>
  </q-input>
</template>

<script lang="ts">
import { useQuasar } from 'quasar';
import { emitter } from 'src/emitter';
import { defineComponent, ref } from 'vue';
import { composeNumberClause } from './utils';

export default defineComponent({
  name: 'search-number',

  props: {
    label: {
      type: String,
      required: true,
    },
    field: {
      type: String,
      required: true,
    },
    id: {
      type: String,
    },
    width: {
      type: Number,
      default: 200,
    },
    prefix: {
      type: String,
      default: '',
    },
  },

  setup(props) {
    const $q = useQuasar();

    const open = ref(false);
    const triggerModel = ref('');
    const popupModel = ref('');
    const popupModel2 = ref('');
    const direction = ref<'smaller' | 'larger' | 'between'>('smaller');

    const onConfirm = () => {
      if (!popupModel.value) {
        return;
      }

      const error = { message: '输入无效, 请输入数字', color: 'negative' };
      if (direction.value === 'between') {
        if (Number.isNaN(Number(popupModel.value)) || Number.isNaN(Number(popupModel2.value))) {
          return $q.notify(error);
        } else if (Number(popupModel.value) > Number(popupModel2.value)) {
          return $q.notify({ message: '输入无效, 上边的值必须小于等于下边的值', color: 'negative' });
        }
      } else {
        if (Number.isNaN(Number(popupModel.value))) {
          return $q.notify(error);
        }
      }

      const clause = composeNumberClause(props.prefix, props.field, {
        n1: Number(popupModel.value),
        direction: direction.value,
        n2: Number(popupModel2.value),
      });

      switch (direction.value) {
        case 'between':
          triggerModel.value = '(' + popupModel.value + ' , ' + popupModel2.value + ')';
          break;
        case 'smaller':
          triggerModel.value = '< ' + popupModel.value;
          break;
        case 'larger':
        default:
          triggerModel.value = '> ' + popupModel.value;
          break;
      }

      emitter.emit('table_search', { id: props.id, field: props.field, clause });
      open.value = false;
    };

    const onClear = () => {
      triggerModel.value = '';
      popupModel.value = '';
      popupModel2.value = '';
      emitter.emit('table_search', { id: props.id, field: props.field });
    };

    return { direction, popupModel, popupModel2, triggerModel, onClear, onConfirm, open };
  },
});
</script>
